<template>
  <div class="tab-control">
    <div class="tab-control-item" @click="tabClick(index)" v-for="(item,index) in props.titles" :key="index">
      <span :class="{active:index === tabIndex}">{{item}}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";

const tabIndex = ref(0);
 interface Props{
   titles: string[];
 }

 const props = withDefaults(defineProps<Props>(), {
   titles:()=>[],
 })

 interface Emits{
   (e:'tabClick',index:number):void
 }

const emits =  defineEmits<Emits>()

 function tabClick(index:number){
   tabIndex.value = index;
   emits('tabClick', index);
 }
</script>

<style lang="scss">
.tab-control {
  display: flex;
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  position: sticky;
  z-index: 10;
  top:48px;
  background-color: #fff;
  .tab-control-item {
    flex: 1;
    span{
      padding:10px;
    }
    .active {
      color: hsla(160, 100%, 37%, 1);
      border-bottom: 3px solid hsla(160, 100%, 37%, 1);
    }

  }


}
</style>